<template>
    <div>
      <div v-for="count in card_num" :key="count">
        <div class="blog_card" @click="toBlog(mybolg_info[count-1].blogId)">
          <div style="display: flex; width: 100%; margin: 14px">
            <span>{{ mybolg_info[count-1].blogTitle }}</span>
          </div>
          <div style="display: flex; width: 100%; margin: 14px float: right;">
            <span style="margin-left: 14px">{{ mybolg_info[count-1].bolgNote }}</span>
          </div>
          <div style="display: flex; width: 100%; margin: 14px; margin-top: 26px">
            <span style="font-size: 10px; margin-right: 20px"
              >分类：{{ mybolg_info[count-1].blogSortName }}</span
            ><span>{{ mybolg_info[count-1].pageView }}</span>
          </div>
          <div style="display: flex; width: 100%; margin: 12px">
            <span style="position: absolute; right: 30px"
              >创建时间：{{ mybolg_info[count-1].createTime }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from "axios";
  export default {
    data() {
      return {
        mybolg_info: [],
        card_num:0,
      };
    },
    mounted: function () {
      this.BlogIfnoByName();
    },
    methods: {
      BlogIfnoByName() {  
        axios
          .post("/Collect_ifno", {
            user_token: localStorage.getItem("user_Token"),
          })
          .then((response) => {
             for (let i = 0; i < response.data.length; i++) {
               this.mybolg_info.push(response.data[i]);
             }
            this.card_num = response.data.length;
            // console.log(this.mybolg_info);
          });
      },
      toBlog(blogId){
        this.$router.push({name:'BlogView',query:{blogId:blogId}})
      }
    },
  };
  </script>
  
  <style>
  .blog_card {
    display: block;
    background-color: #fff;
    border: #eee dashed 3px;
    height: 150px;
    margin-bottom: 10px;
  }
  .blog_card:hover {
    border: #eee solid 3px;
  }
  </style>